<template>
    <view class="teamDetail">
      <pagehead>团队详情</pagehead>
      <view class="content">
        <view class="top">
          <view class="left">
            <view class="imgBox">
              <init-image v-if="detail.head_photo" :src="imgShow(detail.head_photo)" mode="" />
              <image class="img" v-else
                :style="{background:'url('+IMAGE_STATIC+'/images/logo.png) 100% /cover no-repeat'}">
              </image>
            </view>
            <view class="name">{{detail.real_name || '待实名'}} | {{ detail.user_tel }}</view>
          </view>
          <view class="btn" @tap.stop="callPhone(detail.user_tel)">联系</view>
        </view>
        <view class="ul">
          <view class="li">
            <view class="txt">达标交易额（本月）</view>
            <view class="num">{{ viewCount(detail.month_trade_money)}}</view>
          </view>
          <view class="li">
            <view class="txt">未激活机具（累计）</view>
            <view class="num">{{ detail.noactive_merchant_num}}</view>
          </view>
          <view class="li">
            <view class="txt">总商户数（本月）</view>
            <view class="num">{{ detail.month_merchant_num}}</view>
          </view>
          <view class="li">
            <view class="txt">总商户数（累计）</view>
            <view class="num">{{ detail.total_merchant_num}}</view>
          </view>
        </view>
      </view>
    </view>
</template>

<script>
export default {
    data () {
        return {
          IMAGE_STATIC: this.$url.assetsPath, //图片资源
          userId:'',
          detail:{}
        };
    },
    onLoad (options) {
      if (options) {
        this.userId = options.value1
        this.getDetail()
      }
    },
    methods: {
      // 详情
      getDetail() {
        var data = {
          user_id: this.userId,
        };
        console.log("data：", data);
        uni.showLoading({
          mask: true
        })
        this.$Ajax('/api/user/team/getUserTeamDetail', data, res => {
          uni.hideLoading();
          this.detail = res.data.userTeamDetail;
          console.log('detail', this.detail)
        }, err => {
          uni.hideLoading();
        }
        )
      },
       // 拨打电话
      callPhone(phoneNumber) {
        uni.makePhoneCall({
          phoneNumber: phoneNumber, // 电话号码
          success: function () {
            console.log('拨打电话成功');
          },
          fail: function () {
            console.log('拨打电话失败');
          }
        });
      }
    },
};
</script>

<style lang="scss" scoped>
.teamDetail{
  overflow: hidden;
  background: #fff;
  height: 100vh;
  .top{
    margin:0 32rpx;
    margin-top: 32rpx;
    overflow: hidden;
    @include flexBetween;
    border-bottom: 1px solid #eee;
    padding: 20rpx 0;
    .imgBox{
      width: 104rpx;
      height: 104rpx;
      border-radius: 100%;
      overflow: hidden;
      .img{
        width: 100%;
        height: 100%;
        border-radius: 100%;
      }
    }
    .left{
      @include flexLeft;
      font-size: 24rpx;
      color: #333;
      .name{
        margin-left: 20rpx;
      }
    }
    .btn{
      width: 114rpx;
      text-align: center;
      height: 40rpx;
      line-height: 40rpx;
      background: #AD2926;
      font-size: 20rpx;
      color: #FFFFFF;
      border-radius: 72rpx;
    }
  }
  .ul{
    margin-top: 32rpx;
    display: flex;
    flex-wrap: wrap;
    padding:0 32rpx;
    .li{
      width: 50%;
      padding: 32rpx;
      border-bottom: 1px solid #eee;
      .txt{
        font-size: 24rpx;
        color: #999;
      }
      .num{
        margin-top: 20rpx;
        font-size: 24rpx;
        color: #333;
        font-weight: bold;
      }
    }
    .li:nth-of-type(2n){
      border-left: 1px solid #eee;
    }
    .li:nth-last-of-type(1),.li:nth-last-of-type(2){
      border-bottom: none;
    }
  }
}
</style>
